<link rel="stylesheet" type="text/css" href="__ROOT__/Public/Css/jquery.Jcrop.min.css" media="all">
<link rel="stylesheet" type="text/css" href="__ROOT__/Public/Js/uploadify-v3.1/uploadify.css" media="all">
<script type="text/javascript" src="__ROOT__/Public/Js/uploadify-v3.1/jquery.uploadify-3.1.min.js"></script>
<script type="text/javascript" src="__ROOT__/Public/Js/jquery.Jcrop.min.js"></script>
<script type="text/javascript" src="__ROOT__/Public/Js/ThinkBox/jquery.ThinkBox.js"></script>
<link rel="stylesheet" type="text/css" href="__ROOT__/Public/Js/ThinkBox/css/ThinkBox.css" media="all">

<style type="text/css">
.main{
    margin: 0 auto;
    padding: 15px;
    width: 750px;
    font-family: "microsoft yahei";
   /* background-color: #F5F5F5;*/
}
.cf:before,.cf:after {
    display: table;
    content: "";
    line-height: 0;
}
.cf:after {
    clear: both;
}
.cf {
    *zoom: 1;
}
.upload-area {
    position: relative;
    float: left;
    margin-right: 30px;
    width: 200px;
    height: 200px;
    background-color: #F5F5F5;
    border: 2px solid #E1E1E1;
}
.upload-area .file-tips {
    position: absolute;
    top: 90px;
    left: 0;
    padding: 0 15px;
    width: 170px;
    line-height: 1.4;
    font-size: 12px;
    color: #A8A8A3;
    text-align: center;
}
.userup-icon {
    display: inline-block;
    margin-right: 3px;
    width: 16px;
    height: 16px;
    vertical-align: -2px;
    background: url("__ROOT__/Public/Images/userup_icon.png") no-repeat;
}
.uploadify-button {
    line-height: 120px!important;
    text-align: center;
}
.preview-area {
    float: left;
}
.tcrop {
    clear: right;
    font-size: 14px;
    font-weight: bold;
}
.update-pic .crop {
    background: url("__ROOT__{$userInfo['face']}") no-repeat scroll center center #EEEEEE;
    background-size: 100px 100px;
    float: left;
    margin-bottom: 20px;
    margin-top: 10px;
    overflow: hidden;
}
.crop100 {
    height: 100px;
    width: 100px;
}
.crop60 {
    height: 60px;
    margin-left: 20px;
    width: 60px;
}
.update-pic .save-pic {
    clear: left;
    margin-right: 20px;
}
.update-pic .uppic-btn {
    background-color: #348FD4;
    color: #FFFFFF;
    display: block;
    float: left;
    font-size: 16px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    vertical-align: middle;
    width: 89px;
}
.preview {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 11;
    width: 200px;
    height: 200px;
    overflow: hidden;
    background:#fff;
    display: none;
}
</style>

<div id="min-height" style="min-height: 630px; height: 814px;">
<div class="w980 pb90 fc minHeight">
    <div class="w220 bg_gray fl  pt30 tac pos_r">

        <a href="{:U('Index/Customer/face')}">
            <img title="点击头像编辑" src="__ROOT__{$userInfo['face']}" class="img-circular" height="200" width="200">
        </a>
        <h4 class="lh26 ft24 pt10">{$userInfo['username']}</h4>

        <div class="pb10 pt10 bottom-border-white">
            <a class="btn btn_gray3" href="{:U('Index/Customer/index')}">
                <span class="btn_lft"></span>
                <span class="btn_mid ">个人设置</span>
                <span class="btn_rgt"></span>
            </a>
            <a class="btn btn_gray3" href="{:U('Index/Customer/password')}">
                <span class="btn_lft"></span>
                <span class="btn_mid ">密码修改</span>
                <span class="btn_rgt"></span>
            </a>
        </div>
        <ul class="lhb_snav1 ft15 mt15 tal">
            

        </ul>
    </div>  
    <div class="fr">
        <div class="zb_learning">
            <h2 class="lhb_tit1 ft18 mt15">头像修改</h2>
            <div class="y_r">
                <div id="headuploader" style="position:relative;z-index:1;">
                    <div class="main">
                    <!-- 修改头像 -->
                    <form action="{:U('Index/Customer/cropImg')}" method="post" id="pic" class="update-pic cf">
                        <!-- <input type="hidden" name="session_id" value="{$session_id}"/> -->
                        <div class="upload-area">
                            <input type="file" id="user-pic">
                            <div class="file-tips">支持JPG,PNG,GIF，图片小于1MB，尺寸不小于100*100,真实高清头像更受欢迎！</div>
                            <div class="preview hidden" id="preview-hidden"></div>
                        </div>

                        <div class="preview-area">
                            <input type="hidden" id="x" name="x" />
                            <input type="hidden" id="y" name="y" />
                            <input type="hidden" id="w" name="w" />
                            <input type="hidden" id="h" name="h" />
                            <input type="hidden" id='img_src' name='src'/>
                            <div class="tcrop">头像预览</div>
                            <div class="crop crop100"><img id="crop-preview-100" src="" alt=""></div>
                            <div class="crop crop60" style="background-size: 60px 60px"><img id="crop-preview-60" src="" alt="" ></div>
                            <a class="uppic-btn save-pic" href="javascript:;">保存</a>
                            <a class="uppic-btn reupload-img" href="javascript:$('#user-pic').uploadify('cancel','*');">重新上传</a>
                        </div>
                    </form>
                    <!-- /修改头像 -->

                    <!-- 展示头像 -->
                    <!-- <div style="margin: 20px 0 10px;">
                        <h2>头像展示：</h2>
                        <div style="margin-bottom: 10px;">
                            <span style="vertical-align: top">临时图片：</span>
                            <img style="max-width: 750px;" src="__ROOT__/Avatar/temp.jpg" title="临时图片"/>
                        </div>
                        <div>
                            <span style="vertical-align: top">裁切图片：</span>
                            <img src="__ROOT__/Avatar/avatar_100.jpg" title="100*100"/>
                            <img src="__ROOT__/Avatar/avatar_60.jpg" title="60*60"/>
                            <img src="__ROOT__/Avatar/avatar_30.jpg" title="30*30"/>
                        </div>
                    </div> -->
                    <!-- /展示头像 -->
                    </div>
                </div>
            </div>
        </div>
    </div>              
</div>

</div>
<script type="text/javascript">
    $(function(){
        //上传头像(uploadify插件)
        $("#user-pic").uploadify({
            // 'formData' : { '<?php echo session_name();?>' : '<?php echo session_id();?>' } 
            'queueSizeLimit' : 1,
            'removeTimeout' : 0.5,
            'preventCaching' : true,
            'multi'    : false,
            'swf'           : '__ROOT__/Public/Js/uploadify-v3.1/uploadify.swf',
            'uploader'      : "{:U('Index/Customer/uploadImg')}",
            'buttonText'    : '<i class="userup-icon"></i>上传头像',
            'width'         : '200',
            'height'        : '200',
            'fileTypeExts'  : '*.jpg; *.png; *.gif;',
            'formData' :    { 'uid' : '{$Think.session.uid}' },
            'onUploadSuccess' : function(file, data, response){
                //调试语句
               
                console.log(data);
               
                var data = $.parseJSON(data);
                
                if(data['status'] == 0){
                    $.ThinkBox.error(data['info'],{'delayClose':3000});
                    return;
                }
                var preview = $('.upload-area').children('#preview-hidden');
                preview.show().removeClass('hidden');
                //两个预览窗口赋值
                $('.crop').children('img').attr('src',data['path']+'?random='+Math.random());
                //隐藏表单赋值
                $('#img_src').val(data['path']);
                //绑定需要裁剪的图片
                var img = $('<img />');
                preview.append(img);
                preview.children('img').attr('src',data['path']+'?random='+Math.random());
                var crop_img = preview.children('img');
                crop_img.attr('id',"cropbox").show();
                var img = new Image();
                img.src = data['path']+'?random='+Math.random();
                //根据图片大小在画布里居中
                img.onload = function(){
                    var img_height = 0;
                    var img_width = 0;
                    var real_height = img.height;
                    var real_width = img.width;
                    if(real_height > real_width && real_height > 200){
                        var persent = real_height / 200;
                        real_height = 200;
                        real_width = real_width / persent;
                    }else if(real_width > real_height && real_width > 200){
                        var persent = real_width / 200;
                        real_width = 200;
                        real_height = real_height / persent;
                    }
                    if(real_height < 200){
                        img_height = (200 - real_height)/2;
                    }
                    if(real_width < 200){
                        img_width = (200 - real_width)/2;
                    }
                    preview.css({width:(200-img_width)+'px',height:(200-img_height)+'px'});
                    preview.css({paddingTop:img_height+'px',paddingLeft:img_width+'px'});
                }
                //裁剪插件
                $('#cropbox').Jcrop({
                    bgColor:'#333',   //选区背景色
                    bgFade:true,      //选区背景渐显
                    fadeTime:1000,    //背景渐显时间
                    allowSelect:false, //是否可以选区，
                    allowResize:true, //是否可以调整选区大小
                    aspectRatio: 1,     //约束比例
                    minSize : [100,100],//可选最小大小
                    boxWidth : 200,     //画布宽度
                    boxHeight : 200,    //画布高度
                    onChange: showPreview,//改变时重置预览图
                    onSelect: showPreview,//选择时重置预览图
                    setSelect:[ 0, 0, 100, 100],//初始化时位置
                    onSelect: function (c){ //选择时动态赋值，该值是最终传给程序的参数！
                        $('#x').val(c.x);//需裁剪的左上角X轴坐标
                        $('#y').val(c.y);//需裁剪的左上角Y轴坐标
                        $('#w').val(c.w);//需裁剪的宽度
                        $('#h').val(c.h);//需裁剪的高度
                  }
                });
                //提交裁剪好的图片
                $('.save-pic').click(function(){
                    if($('#preview-hidden').html() == ''){
                        $.ThinkBox.error('请先上传图片！');
                    }else{
                        //由于GD库裁剪gif图片很慢，所以长时间显示弹出框
                        $.ThinkBox.success('图片处理中，请稍候……',{'delayClose':30000});
                        $('#pic').submit()
                    }
                });
                //重新上传,清空裁剪参数
                var i = 0;
                $('.reupload-img').click(function(){
                    $('#preview-hidden').find('*').remove();
                    $('#preview-hidden').hide().addClass('hidden').css({'padding-top':0,'padding-left':0});
                });
            }
        });
        //预览图
        function showPreview(coords){
            var img_width = $('#cropbox').width();
            var img_height = $('#cropbox').height();
              //根据包裹的容器宽高,设置被除数
            var rx = 100 / coords.w;
            var ry = 100 / coords.h;
              $('#crop-preview-100').css({
                width: Math.round(rx * img_width) + 'px',
                height: Math.round(ry * img_height) + 'px',
                marginLeft: '-' + Math.round(rx * coords.x) + 'px',
                marginTop: '-' + Math.round(ry * coords.y) + 'px'
              });
              rx = 60 / coords.w;
              ry = 60 / coords.h;
              $('#crop-preview-60').css({
                width: Math.round(rx * img_width) + 'px',
                height: Math.round(ry * img_height) + 'px',
                marginLeft: '-' + Math.round(rx * coords.x) + 'px',
                marginTop: '-' + Math.round(ry * coords.y) + 'px'
              });
        }
    })

</script>

<script>
    function unbind(thirdType,openId){
        var nextPage=$("input[name='next_page']").val();
        var url="/thirdLoginCon/unbind?nextPage="+nextPage+"&uid="+openId+"&type="+thirdType;
        location.href=url;
    }
    function addbind(thirdType,type){
        var nextPage=$("input[name='next_page']").val();
        var kooNextPage='http://www.koo.cn/thirdLoginCon/callBack?bind='+type+'&nextPage='+nextPage;
        var koo_next_url=base64_encode(kooNextPage);
        //var koo_next_url=encodeURIComponent(koo_next);
        var url='http://login.koolearn.com/sso//requestToken.do?koo_next_page='+koo_next_url+'&type='+thirdType+'&f=www_third_denglu';
        location.href=url;
    }

    // $(function(){
    //     $(".zb_learning").ontabs(".setting-nav li",".setting-wrapper > .box","cur","click");
    // });
    function base64_encode(str){
        var c1, c2, c3;
        var base64EncodeChars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/";
        var i = 0, len= str.length, string = '';

        while (i < len){
            c1 = str.charCodeAt(i++) & 0xff;
            if (i == len){
                string += base64EncodeChars.charAt(c1 >> 2);
                string += base64EncodeChars.charAt((c1 & 0x3) << 4);
                string += "==";
                break;
            }
            c2 = str.charCodeAt(i++);
            if (i == len){
                string += base64EncodeChars.charAt(c1 >> 2);
                string += base64EncodeChars.charAt(((c1 & 0x3) << 4) | ((c2 & 0xF0) >> 4));
                string += base64EncodeChars.charAt((c2 & 0xF) << 2);
                string += "=";
                break;
            }
            c3 = str.charCodeAt(i++);
            string += base64EncodeChars.charAt(c1 >> 2);
            string += base64EncodeChars.charAt(((c1 & 0x3) << 4) | ((c2 & 0xF0) >> 4));
            string += base64EncodeChars.charAt(((c2 & 0xF) << 2) | ((c3 & 0xC0) >> 6));
            string += base64EncodeChars.charAt(c3 & 0x3F)
        }
        return string;
    }

</script>
<script>
    loadform();
</script>
<script type="text/javascript">
    function valid(){
        var address = $('#address').val();
        if(address != '' && address.length < 5){
            $('#addressError').show();
            $('#addressErrorText').text('地址不能少于五个字');
            return false
        }
        return true;
    }
</script>



